<template>
	<div>
		<div class="other-banner">
			<img src="../assets/image/combanner.jpg" alt="">
		</div>
		<div class="company-box" style="padding-top: 40px;background:#fafafa;">
			<div class="search-box">
				<div class="search-title">
					<router-link tag='a' :to="'/index'" >首页</router-link> >
					<a>装修公司</a>
					<!-- <div class="city_box2" id="city_1">
						<select class="prov"></select> 
						<select class="city" disabled="disabled"></select>
					</div> -->
				</div>
				<div class="search-li">
					<span>户型：</span>
					<ul class="search-type">
						<li @click="getDoor('0')" :class="[door == '0'? 'cur': '']">全部</li>
						<li @click="getDoor(item.key)" v-for="(item, index) in doorData" :class="[item.key == door? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
				<div class="search-li">
					<span>区域：</span>
					<ul class="search-type">
						<li @click="getArea('')" :class="[area == '全部'? 'cur': '']">全部</li>
						<li @click="getArea(item)" v-for="(item, index) in this.$store.state.areaData" :class="[item == area? 'cur': '']" :key="index">{{item}}</li>
					</ul>
				</div>
				<div class="search-li">
					<span>价位：</span>
					<ul class="search-type">
						<li @click="getMoney('0')" :class="[money == '0'? 'cur': '']">全部</li>
						<li @click="getMoney(item.key)" v-for="(item, index) in moneyData" :class="[item.key == money? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
			</div>
			<!-- 广告 -->
			<div class="company-ad">
				<a target="_black" :href="item.url" class="ca-img" v-for="(item, index) in adData" :key="index">
          <img :src="item.image">
        </a>
			</div>
			<div class="wrap-companybox">
				<div class="imgcompany-box" v-for="(item, index) in companyData" :key="index" @click="$axios.goCompany(item.companyIndex)">
					<div class="imb-img">
						<img :src="item.image">
					</div>
					<div class="imb-text">{{item.title}}</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="page" style="text-align:center;margin-top:20px;" v-if="total >= pagelimit">
      	<el-pagination
      	  background
      	  layout="prev, pager, next"
      	  @current-change="handleCurrentChange"
      	  :page-size="pagelimit"
      	  :total="total">
      	</el-pagination>
    	</div>
		</div>
	</div>
</template>

<script>
import cityData from '../assets/script/data.json'
export default {
  data () {
    return {
      companyData: [],
      doorData: [],
      door: '0',
      moneyData: [],
      money: '0',
      area: '全部',
      pageindex: 0,
      pagelimit: 8,
      total: '',
      adData: []
    }
  },
  methods: {
  	getType () {
  		var that = this
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 3
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.doorData = res.data.items
  				}
  			})
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 6
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.moneyData = res.data.items
  				}
  			})
  	},
    getAd: function () {
      var that = this
      that.$axios.request('/AdvertInfo/GetAdvert', {
        Position: '3',
        Pageindex: 0,
        Pagelimit: 4
      })
        .then((res) => {
          if (res.code === 0) {
            that.adData = res.data.datalist
          }
        })
    },
  	handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getDesign()
    },
  	getCompany () {
  		var that = this
  		that.$axios.request('/CompanyInfo/Index', {
  			City: this.$store.state.city,
  			Door: that.door,
  			FixMoney: that.money,
  			ServiceArea: this.$store.state.area,
  			Pageindex: that.pageindex,
  			Pagelimit: that.pagelimit
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.companyData = res.data.dataList
  					that.total = res.data.total
  				}
  			})
  	},
  	getDoor: function(key) {
  		var that = this
  		that.door = key
  		that.getCompany()
  	},
  	getMoney: function(key) {
  		var that = this
  		that.money = key
  		that.getCompany()
  	},
  	getArea: function(key) {
  		var that = this
  		that.area = key
  		if (key === '') {
  			that.area = '全部'
  		}
  		that.$store.commit('changeArea', key)
  		that.getCompany()
  	}
  },
  mounted () {
    var that = this
  	that.getType()
    that.getAd()
    that.$axios.getCity(function(){
      var area = []
      var province = that.$store.state.province
      var city = that.$store.state.city
      for (var i in cityData['86']) {
        if (cityData['86'][i] === province) {
          for (var j in cityData[i]) {
            if (cityData[i][j] === city) {
              for (var k in cityData[j]) {
                area.push(cityData[j][k])
              }
            }
          }
        }
      }
      that.$store.commit('changeAreadata', area)
      that.getCompany()
    })
  }
}
</script>